<template>
	<view>
		<view class="custom-nav">
			<image class="nav-logo" src="/static/logo4.png" style="width: 500rpx;height: 150rpx;" mode="aspectFit" />
		</view>
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar ref="searchBar" radius="100" cancelButton="none"  disabled placeholder="搜索科室、医生">
			</uni-search-bar>
		</view>

		<!-- 首行服务内容开始 -->
		<view class="service-warp">
			<uni-card margin="5px">
				<uni-grid :column="column" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in fristServiceItem">
						<view class="grid-item-box">
							<image :src="item.icon" style="width: 100rpx; height: 100rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
		<!-- 首行服务内容结束 -->
		
		<!-- 轮播图开始 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner" >
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDtos" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in data" :key="item._id" >
							<view class="swiper-item" >
								<image  class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="flase"></image>
							</view>
						</swiper-item>
					</swiper>
					
				</view>
			</unicloud-db>
		</view>
		
		<!-- 门诊业务开始 -->
		<view class="service-warp">
			<uni-card title="门诊业务" margin="5px">
				<uni-grid :column="column" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in secondServiceItem">
						<view class="grid-item-box">
							<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
		<!-- 门诊业务结束 -->
		
		<!-- 住院业务开始 -->
		<view class="service-warp">
			<uni-card title="住院业务" margin="5px">
				<uni-grid :column="column" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in thirdServiceItem">
						<view class="grid-item-box">
							<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
		<!-- 住院业务结束 -->
		<!-- 特色服务开始 -->
		<view class="service-warp">
			<uni-card title="特色服务" margin="5px">
				<uni-grid :column="column" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in forthServiceItem">
						<view class="grid-item-box">
							<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
		<!-- 特色服务结束 -->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDtos:true,
				autoplay:true,
				interval:2000,
				duration:500,
				
				column: 4,
					fristServiceItem: [
						{text: '智能导诊', icon: '/static/service/zhinengdaozhen.jpg'},
						{text: '网上看病', icon: '/static/service/wangshangkanbing.jpg'},
						{text: '预约挂号', icon: '/static/service/yuyueguahao.jpg'},
						{text: '护理咨询',icon:'/static/service/hulizixun.jpg'}
					],
					secondServiceItem:[
						{text: '门诊充值',icon:'/static/service/menzhenchongzhi.png'},
						{text: '门诊记录',icon:'/static/service/menzhenjilu.png'},
						{text: '挂号记录',icon:'/static/service/guahaojilu.png'},
						{text: '门诊报告',icon:'/static/service/menzhenbaogao.png'},
						{text:'医保电子凭证',icon:'/static/service/yibaodianzipingzhen.png'},
						{text:'就诊指南',icon:'/static/service/jiuzhenzhinan.png'},
						{text:'特色门诊服务',icon:'/static/service/tesemenzhenfuwu.png'},
						{text:'门诊退费',icon:'/static/service/menzhentuifei.png'},
						{text:'在线签到',icon:'/static/service/zaixianqiandao.png'}
						
					],
					thirdServiceItem:[
						{text:'住院充值',icon:'/static/service/zhuyuanchongzhi.png'},
						{text:'住院记录',icon:'/static/service/zhuyuanjilu.png'},
						{text:'每日清单',icon:'/static/service/meiriqingdan.png'},
						{text:'住院报告',icon:'/static/service/zhuyuanbaogao.png'},
						{text:'病案复印',icon:'/static/service/binganfuyin.png'},
						{text:'电子陪护证',icon:'/static/service/dianzipeihuzheng.png'}
					],
					forthServiceItem:[
						{text:'体检预约',icon:'/static/service/tijianyuyue.png'},
						{text:'体检报告',icon:'/static/service/tijianbaogao.png'},
						{text:'本院职工体检',icon:'/static/service/benyuanzhigongtijian.png'},
						{text:'检查预约',icon:'/static/service/jianchayuyue.png'},
						{text:'健康科普',icon:'/static/service/jiankangkepu.png'},
						{text:'冷冻胚胎续费',icon:'/static/service/lengdongpeitaixufei.png'},
						{text:'冷冻胚胎续费订单',icon:'/static/service/lengdongpeitaixufeidingdan.png'}
					]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	view{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
.uni-search-box{
	padding-top: 1px;
	padding-bottom: 0px;
	text-align: left;
	height: 100rpx;
	border-color: aqua;
}
.uni-margin-wrap{
	margin: 5rpx 10rpx;
	overflow: hidden;
	height: 200rpx;
	border-radius: 50rpx;
}
.swiper{
	height: 200rpx;
	border-radius: 150rpx;
}
.banner-image{
	width: 750rpx;
	height: 200rpx;
}
.grid-item-box{
	flex: 1;
	display: flex;
	padding-top: 0px;
	width:100rpx;
	height: 250rpx;
	padding-left: 4px;
	font-size: 20rpx;
}
.grid-item-box {
    margin: 10px; /* 设置图片之间的间距 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 使文本居中对齐 */
}

.grid-item-text {
    font-size: 16px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体为粗体 */
}
.custom-card {
    border: none !important; /* 强制去掉边框 */
    box-shadow: none !important; /* 去掉阴影效果 */
}

</style>
